import React, { useState } from 'react'
import cn from 'classnames'
import {Input,Icon,Dialog} from '@knownsec/react-component'
import s from './style.module.css'
import i from '../index.module.css'




export default function CheckMfa({visible, getMfa, setVis}) {
  const [val, setVal] = useState('')
  const subCheck = () => {
    getMfa(val)
  }
  return (
    <Dialog
      className={s.w400}
      title="验证虚拟MFA认证"
      cancelText=""
      confirmText=""
      onhide={() => setVis(false)}
      visible={visible}
    >
      <div className={i.p20}>
        <Input pro placeholder="请输入6位数字安全码" value={val} onChange={({value}) => setVal(value)} />
        <div className={cn(i.mt20, s.btn)} onClick={subCheck}>提交验证</div>
        <div className={i.mt10}>
          <Icon type="question" className={cn(i.errorColor, i.vam)} />
          <span className={i.vam}>如您因为某些原因（如手机丢失或误删除MFA应用等）无法进行验证</span>
        </div>
        <div className={i.mt10}>
          <span className={i.successColor}>解决办法：</span>
          <span>请联系在线客服，解除MFA绑定。</span>
        </div>
      </div>
    </Dialog>
  )
}